<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>Finalove-App-BaseInfo</title>
		<link rel="stylesheet" href="../../resource/font/css/font-awesome.min.css">
		<link rel="stylesheet" href="../../resource/css/mint.css">
		<link rel="stylesheet" href="../../resource/css/style.css">
		<script src="../../resource/js/vue.js"></script>
		<script src="../../resource/js/mint.min.js"></script>
		<script src="../../resource/js/jquery.min.js"></script>
		<style type="text/css">
			body{
				background-color: #f2f2f2;
			}
			.ct-box{
				margin-top: 40px;
				width: 90%;
				margin-left: 5%;
			}
			#userHeadImg {
				margin-top: 30px;
				margin-bottom: 30px;
				border-radius: 15px;
				border: 2px solid #ebeef5;
				box-shadow: 0 4px 12px 0 rgba(0,0,0,0.1);
			}
			.saveBtn {
				margin-top:30px;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<mt-header fixed :title="title">
				<mt-button icon="back" slot="left" @click="closeView"></mt-button>
			</mt-header>
			<div class="ct-box">
				<p class="text-center">
					<img :src="userInfo.user_head" width="150px" height="150px" id="userHeadImg" @click="editHead">
				</p>
				<mt-field label="登陆账号" v-model="userInfo.user_name" readonly></mt-field>
				<mt-field label="邮箱" v-model="userInfo.email" readonly></mt-field>
				<mt-field label="昵称" v-model="userInfo.nick_name"></mt-field>
				<mt-button size="large" type="primary" class="saveBtn" @click="saveUserInfo">保存</mt-button>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var main = new Vue({
			el:"#main",
			data:{
				title:"我的信息",
				userInfo:{
					user_id:"",
					user_name:"",
					nick_name:"",
					email:"",
					user_head:""
				},
				base64imgData:""
			},
			mounted:function() {
				this.init();
			},
			methods:{
				init() {
					// 获取配置
					$.getJSON('../../resource/config.json',function(res){
						main.api_prefix = res.api_prefix;
						main.api_key = res.api_key;
						main.app_version = res.app_version;
						main.app_version_check_url = res.app_version_check_url;
					});
					// h5 plus
					document.addEventListener('plusready',function () {
						// 沉浸header
						plus.navigator.setFullscreen(true);
						// backbutton事件修改
						plus.key.addEventListener('backbutton', function() {
							plus.webview.currentWebview().close();
							return false;
						}, false);
						// 获取信息
						main.userInfo = {
							user_id:plus.storage.getItem("user_id"),
							user_name:plus.storage.getItem("user_name"),
							nick_name:plus.storage.getItem("nick_name"),
							email:plus.storage.getItem("email"),
							user_head:plus.storage.getItem("user_head"),
						}
					});
				},
				closeView() {
					plus.webview.currentWebview().close();
				},
				/**
				 * [编辑头像]
				 */
				editHead() {
					plus.nativeUI.actionSheet({title:"选择照片",cancel:"取消",buttons:[{title:"拍照"},{title:"从相册选取"}]},function(e){
						if(e.index == 1){
							// 拍照
							main.getImgByCamera();
						}else if(e.index == 2){
							// 相册
							main.getImgByGallery();
						}
					});
				},
				getImgByCamera() {
					var cmr = plus.camera.getCamera();
					cmr.captureImage(function(p) {
						plus.io.resolveLocalFileSystemURL(p, function(entry) {
							main.cutImage(entry.toLocalURL())
						},function(e){
							main.$toast("照片文件读取失败");
						});
					},function(e) {
						main.$toast("摄像头打开失败");
					},{
						filename: "_doc/camera/",
						index: 1
					});
				},
				getImgByGallery() {
					var opt = {
						filter:"image",
						multiple:false,
					}
					plus.gallery.pick(function(p) {
						plus.io.resolveLocalFileSystemURL(p, function(entry) {
							main.cutImage(entry.toLocalURL())
						},function(e){
							main.$toast("照片文件读取失败");
						})
					},function() {
						main.$toast("相册打开失败");
					},opt);
				},
				/**
				 * [裁剪](绝对路径)
				 */
				cutImage(path) {
					var IMAGE_UNSPECIFIED = "image/*";
					var PHOTOZOOM = 2; // 获取完图片返回key
					var PHOTOLAT = 1; // 剪裁完毕后返回key
					var Jav = plus.android.runtimeMainActivity();
					var Intent = plus.android.importClass("android.content.Intent");
					var MediaStore = plus.android.importClass("android.provider.MediaStore");
					var File = plus.android.importClass("java.io.File");
					var Uri = plus.android.importClass("android.net.Uri");
					var intent = new Intent(Intent.ACTION_PICK, null);
					var outPutPath = plus.io.convertLocalFileSystemURL("_doc/camera/"+new Date().getTime()+".jpg");
					var file = new File(outPutPath);
					// 输出目录uri
					var outPutUri = Uri.fromFile(file);
					//去掉\\或者file://
					path = path.replace("\\", "");
					path = path.replace("file://", "");
					var _file = new File(path);
					var a = _file.exists();
					//绝对路径转uri
					var curCropUri = Uri.fromFile(new File(path));
					// console.log("uri:" + curCropUri);
					//裁切
					var cropIntent = new Intent("com.android.camera.action.CROP");
					cropIntent.setDataAndType(curCropUri, IMAGE_UNSPECIFIED);
					// 截图完毕后 输出目录
					cropIntent.putExtra(MediaStore.EXTRA_OUTPUT, outPutUri);
					cropIntent.putExtra("crop", "true");
					// aspectX aspectY 是宽高的比例
					cropIntent.putExtra("aspectX", 1);
					cropIntent.putExtra("aspectY", 1);
					// outputX outputY 是裁剪图片宽高
					cropIntent.putExtra("outputX", 300);
					cropIntent.putExtra("outputY", 300);
					cropIntent.putExtra("return-data", true);
					Jav.startActivityForResult(cropIntent, 1);
					Jav.onActivityResult = function(requestCode, resultCode, data) {
						//裁剪成功图片上传
						// console.log(outPutPath);
						//判断 剪裁完后的图片输出是否存在
						var _file2 = new File(outPutPath);
						console.log(outPutPath);
						var a2 = _file2.exists();
						if(a2) {
							//最后照片的路径
							// console.log(outPutPath);
							main.userInfo.user_head = outPutPath;
							main.uploadUserHead(outPutPath);
						} else {
							main.$toast("裁剪的照片文件保存失败");
						}
					};
				},
				uploadUserHead(path) {
					// console.log(path);
					var serverUrl = "https://www.finalove.top/index/index/uploadHeadByClient";
					var task = plus.uploader.createUpload(serverUrl,{method:"POST"},function (t,status) {
						if ( status == 200 ) {
							var res = eval('(' + t.responseText + ')');
							main.$toast(res.msg)
							if(res.code == 1){
								var myBaseInfo = plus.webview.currentWebview();
								var homePage = myBaseInfo.opener();
								homePage.evalJS("main.checkAndGetUserInfo()");
							}
						} else {
							main.$toast("Upload failed: " + status)
						}
					});
					task.addFile(path,{key:"Filedata"});
					task.addData("user_id",main.userInfo.user_id);
					task.start();
				},
				/**
				 * [保存信息]
				 */
				saveUserInfo() {
					var url = this.api_prefix + "index/saveVisitorBaseInfo";
					var param = {
						api_key:this.api_key,
						params:{
							id:this.userInfo.user_id,
							nick_name:this.userInfo.nick_name
						},
					}
					$.post(url,param,function(res) {
						main.$toast(res.msg);
						if(res.code == 1){
							plus.storage.setItem("nick_name",main.userInfo.nick_name);
							var myBaseInfo = plus.webview.currentWebview();
							var homePage = myBaseInfo.opener();
							homePage.evalJS("main.checkAndGetUserInfo()");
						}
					});
				}
			}
		})
	</script>
</html>
